<template>
  <div class="staff-leave-container">
    <el-card class="leave-card">
      <template #header>
        <div class="card-header">
          <span>请假（教职工视角）</span>
        </div>
      </template>

      <el-tabs v-model="activeTab" class="leave-tabs">
        <el-tab-pane label="申请请假" name="apply">
          <LeaveView />
        </el-tab-pane>
        <el-tab-pane label="审批请假" name="approve">
          <LeaveApprovalView />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import LeaveView from './LeaveView.vue'
import LeaveApprovalView from './LeaveApprovalView.vue'

const activeTab = ref('apply')
</script>

<style scoped>
.staff-leave-container {
  width: 100%;
}
.leave-card {
  width: 100%;
}
.leave-tabs :deep(.el-tab-pane) {
  padding-top: 10px;
}
</style>